<template>

    <div class="chart-container">
      <line-chart :data="{ title: '月度增长趋势', series: { xAxis: months, yAxis: safeData.monthlyGrowth } }" />
      <pie-chart :data="{ title: '消费构成', series: { labels: Object.keys(safeData.revenueBreakdown), values: Object.values(safeData.revenueBreakdown) } }" />
    </div>
</template>

<script setup lang="ts">
import { defineProps, type PropType, ref, computed } from 'vue';
import LineChart from './vip/LineChart.vue';
import PieChart from './vip/PieChart.vue';
interface TrendData {
  monthlyGrowth: number[];
  revenueBreakdown: { [key: string]: number };
}

const props = defineProps({
  data: {
    type: Object as PropType<TrendData>,
    required: true
  }
});

const months = ref([
  '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
]);

const safeData = computed(() => ({

  monthlyGrowth: props.data?.monthlyGrowth ?? [],
  revenueBreakdown: props.data?.revenueBreakdown ?? {}
}));
</script>

<style scoped>
/* 增加容器整体宽度 */
.trend-container {
  padding: 24px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  min-width: 1200px; /* 保证最小宽度 */
}

/* 优化图表容器布局 */
.chart-container {
  display: flex;
  justify-content: space-around; /* 改为居中分布 */
  margin-top: 24px;
  overflow-x: auto; /* 添加横向滚动条 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

/* 图表自适应宽度 */
.line-chart, .pie-chart {
  max-width: 80%; /* 最大宽度不超过容器80% */
}
.chart-title {
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 16px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .line-chart, .pie-chart {
    flex: 1 1 450px;
  }
}
</style>



